<template>
  <nav>
    <span class="city" @click="goToCity">{{ cityName }}</span>
    <div class="ul">
      <div
        class="li"
        v-for="(item, index) in list"
        :key="item.title"
        :class="{ active: activeIndex === index }"
        @click="liClick(index, item.url)"
      >
        {{ item.title }}
      </div>

      <div
        class="bottomLine"
        :style="{ left: (activeIndex * 52 + 16) / 37.5 + 'rem' }"
      ></div>
    </div>
    <span class="iconfont icon-fangdajing" @click="goToSearch"></span>
  </nav>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      // list: ["热映", "影院", "待映"],
      list: [
        {
          index: 0,
          title: "热映",
          url: "/home/movies/hot",
        },
        {
          index: 1,
          title: "影院",
          url: "/home/movies/cinema",
        },
        {
          index: 2,
          title: "待映",
          url: "/home/movies/wait",
        },
      ],
      activeIndex: sessionStorage.getItem("activeIndex") || 0,
    };
  },
  // computed: {
  //   cityName() {
  //     return this.$store.state.cityName;
  //   },
  // },
  // computed: mapState(["cityName"]),
  computed: mapState({
    cityName: (state) => state.city.cityName,
  }),
  watch: {
    $route(val) {
      // console.log(val.path);
      this.list.forEach((item) => {
        if (item.url === val.path) {
          this.activeIndex = item.index;
        }
      });
    },
  },
  methods: {
    liClick(i, url) {
      this.activeIndex = i;
      sessionStorage.setItem("activeIndex", i);
      this.$router.push(url);
    },
    goToCity() {
      this.$router.push("/city");
    },
    goToSearch() {
      this.$router.push("/search");
    },
  },
};
</script>

<style scoped lang="less">
nav {
  width: 375px;
  height: 46px;
  border-bottom: 1px solid @borderColor;
  background-color: #fff;
  display: flex;
  justify-content: space-between;

  .city {
    width: 70px;
    height: 100%;
    .center();
    font-size: @sfont;
  }

  .ul {
    width: 156px;
    .center();
    font-size: 15px;
    position: relative;

    .bottomLine {
      position: absolute;
      width: 20px;
      height: 4px;
      background-color: @themeColor;
      bottom: 3px;
      // left: 120px;
      transition: all 0.3s;
    }

    .li {
      height: 100%;
      .center();
      // padding: 0 10px;
      width: 52px;
      position: relative;
    }

    // li::after {}

    .active {
      font-weight: 900;
      font-size: @mfont;

      // &::after {
      //   content: "";
      //   position: absolute;
      //   width: 20px;
      //   height: 4px;
      //   background-color: @themeColor;
      //   bottom: 3px;
      //   left: 50%;
      //   transform: translateX(-50%);
      // }
    }
  }

  .icon-fangdajing {
    width: 60px;
    height: 100%;
    .center();
    font-size: 20px;
    color: @themeColor;
  }
}
</style>
